<template>
  <div class="container">
    <div class="store-item flex-y-center">
      <el-image :src="storeInfo.firmImgs.split(',')[0] | formatFile" class="avatar"></el-image>
      <div class="info">
          <div class="name">{{ storeInfo.firmName }}</div>
          <div class="bottom-info flex-y-center">
            <div class="box">
              <span class="title">主营业务：</span>
              <span class="content">{{ storeInfo.mainBusiness }}</span>
            </div>
            <div class="box">
              <span class="title">服务区域：</span>
              <span class="content">{{storeInfo.province}}{{storeInfo.city}}{{storeInfo.area}}</span>
            </div>
            <div class="box">
              <span class="title">联系电话：</span>
              <span class="content">{{storeInfo.contactPhone}}</span>
            </div>
          </div>
        </div>

      <div class="collect flex-y-center">
        <img src="@/assets/img/icon-collect-1.png" alt="" />
        <span>收藏</span>
      </div>
    </div>

    <div class="product-list">
      <product-item v-for="(item, index) in storeInfo.products" :key="index" :productInfo="item"></product-item>
    </div>

    <!-- <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    /> -->
  </div>
</template>

<script>
import { getStoreDetail } from '@/api/store'
import ProductItem from "@/components/ProductItem.vue";
export default {
  name: "StoreDetail",
  components: {
    ProductItem,
  },
  data() {
    return {
      id: '',
      storeInfo: {
					firmImgs: '',
					products:[]
				}
    };
  },
  created(){
    this.id = this.$route.params.id
    this.getStoreDetail()
  },
  methods: {
    getStoreDetail() {
				getStoreDetail({id: this.id}).then(res => {
					this.storeInfo = res.result
				})
			}
  },
};
</script>

<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 0 auto 30px;
}

.store-item {
  position: relative;
  padding: 20px 30px;
  background: #fff;
  margin-bottom: 20px;

  .avatar {
    width: 80px;
    height: 80px;
    border-radius: 10px;
  }

  .info {
    margin-left: 20px;

    .name {
      font-weight: bold;
      font-size: 16px;
      color: #333333;
    }

    .bottom-info {
      padding-top: 20px;

      .box {
        padding-right: 60px;
        font-weight: 400;
        font-size: 16px;
        .title {
          color: #808080;
        }

        .content {
          color: #333;
        }
      }
    }
  }

  .collect {
    position: absolute;
    right: 30px;
    top: 0;
    font-weight: 400;
    font-size: 16px;
    color: #818181;
    padding: 20px 0;
    cursor: pointer;

    img {
      width: 16px;
      height: 16px;
      margin-right: 6px;
    }
  }
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  width: 1200px;
  margin: auto;

  ::v-deep .com-product-item:nth-of-type(5n) {
    margin-right: 0;
  }

  ::v-deep .com-product-item {
    margin-bottom: 18px;
  }
}
</style>
